<template>
	<view class="page-adjust">
		<HeadCustom></HeadCustom>
		<u-popup :show="show" mode="right" @close="close" @open="open">
			<view class="popup-content">
				<view class="item1" v-for="(item1,index1) in selectData" :key="index1">
					<view class="label">
						{{item1.label}}
					</view>
					<view class="data">
						<span class="item2" :class="item2.selected ? 'selected' : ''" v-for="(item2,index2) in item1.data" :key="index2">
							{{item2.name}}
						</span>
					</view>
				</view>
				<u-button type="primary" text="确定" @click="submit"></u-button>
			</view>
		</u-popup>
		<view class="search">
			<u-search placeholder="请输入学校名称/专业名称" @custom="search" v-model="searchValue" @search="search"></u-search>
			<view class="filter" @click="openPop">
				筛选
			</view>
		</view>
		<view class="adjust-box">
			<view class="" v-for="(item,index) in tableList" :key="index">
				<adjustItem :dataDetail="item"></adjustItem>
			</view>

		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import adjustItem from '@/schoolMsg/components/adjust-school.vue'
	import {
		prescriptionList
	} from '@/utils/api.js'
	export default {
		components: {
			adjustItem
		},
		onLoad(options) {

		},
		watch:{
			searchValue(value) {
				console.log('value',value)
				// this.params.majorName = value
				this.params.schoolName = value
			}
		},
		mounted() {
			this.prescriptionList()
		},
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 20,
					majorName:'',
					schoolName:''
				},
				searchValue:'',
				show: false,
				tableList: [],
				status: 'loading',
				selectData: [{
						label: '调剂来源',
						data: [{
								name: '全部',
								value: '全部',
								selected: true,
							},
							{
								name: '官网',
								value: '官网',
								selected: false,
							},
							{
								name: '其他',
								value: '其他',
								selected: false,
							}
						]
					},
					{
						label: '学校类型筛选',
						data: [{
								name: '全部',
								value: '全部',
								selected: true,
							},
							{
								name: '985',
								value: '985',
								selected: false,
							},
							{
								name: '211',
								value: '211',
								selected: false,
							},
							{
								name: '双一流',
								value: '双一流',
								selected: false,
							},
							{
								name: '普通高校',
								value: '普通高校',
								selected: false,
							}
						]
					},
					{
						label: '学校地区筛选',
						data: [{
							name: '全部',
							value: '全部',
							selected: true,
						}, ]
					},
					{
						label: 'A区',
						data: [{
								name: '重庆',
								value: '重庆',
								selected: false,
							},

							{
								name: '天津',
								value: '天津',
								selected: false,
							}, {
								name: '北京',
								value: '北京',
								selected: false,
							}, {
								name: '河南',
								value: '河南',
								selected: false,
							},
						]
					},
					{
						label: 'B区',
						data: [{
								name: '内蒙古',
								value: '内蒙古',
								selected: false,
							},
					
							{
								name: '广西',
								value: '广西',
								selected: false,
							}, {
								name: '海南',
								value: '海南',
								selected: false,
							}, {
								name: '贵州',
								value: '贵州',
								selected: false,
							},
						]
					}
				]
			}
		},

		methods: {
			search() {
				this.params.pageNum = 1
				this.tableList = []
				this.prescriptionList()
			},
			close() {
				this.show = false
			},
			open() {

			},
			submit() {
				this.show = false
			},
			openPop() {
				this.show = true
			},
			async prescriptionList() {
				let res = await prescriptionList(this.params)
				if (res.code == 200) {
					this.tableList = this.tableList.concat(res.rows)
					// this.schooList = this.schooList.concat(res.rows)
				}
				if (res.rows.length < 20) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
				console.log('this.tableList', this.tableList)
			}
		},
		onReachBottom() {
			this.status = 'loading';
			this.params.pageNum++
			this.prescriptionList()

		}
	}
</script>

<style lang="scss" scoped>
	.page-adjust {
		background-color: fff;

		.search {
			display: flex;
		}
		.filter {
			line-height: 64rpx;
			text-align: center;
			width: 150rpx;
			background-color: #f7f7f7;
			border-radius: 32rpx;
		}
		.popup-content {
			width: 60vw;
			padding: 120rpx 20rpx 0;
			.item1 {
				margin-top: 30rpx;
			}
			.data {
				margin-top: 10rpx;
				.item2 {
					display: inline-block;
					padding: 5rpx 12rpx;
					white-space: nowrap;
					background-color: #f9f9f9;
					border-radius: 15rpx;
					margin-right: 20rpx;
					margin-bottom: 15rpx;
				}
				.selected {
					color: #3c9cff;
					background-color: #ecf5ff;
				}
			}
		}
		.adjust-box {
			width: 700rpx;
			margin: 0 auto;
			background-color: #f8f9fe;
			.item {
				margin-top: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				position: relative;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;

				.type {
					position: absolute;
					right: 20rpx;
					padding: 5rpx 15rpx;
					top: 20rpx;
					background-color: #fdf6ec;
					color: #e5b76b;
					border-radius: 10rpx;
				}

				.top {
					display: flex;
					align-items: center;

					.schoolName {
						font-size: 30rpx;
						font-weight: 700;
					}

					.tag {
						background-color: #7435e5;
						border-radius: 10rpx;
						padding: 5rpx 15rpx;
						color: #fff;
						margin-top: 10rpx;
					}

					image {
						width: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.bottom {
					display: flex;
					flex-wrap: wrap;

					.item-msg {
						display: flex;
						width: 310rpx;
						margin-bottom: 10rpx;

						.label {
							font-weight: 700;

							white-space: nowrap;
						}

						.value {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}
				}
			}
		}
	}
</style>